<template>
  <div :class="showType === 'vertical' ? 'vertical-style' : 'cross-stype'">
    <div v-for="(item, index) in activities" :key="index" class="list">
      <div class="none"></div>
      <div
        class="line"
        :style="{ display: index + 1 === activities.length ? 'none' : 'block' }"
      ></div>
      <div class="middle results">{{ item.direction === 'pass' ? '同意' : '拒绝' }}</div>
      <div class="middle mt13">{{ item.username }}</div>
      <div class="middle mt5 content">{{ item.fullMessage }}</div>
      <div class="middle mt5 timestamp">{{ parseTime(item.time) }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ApprovalTimeline",
  props: {
    activities: {
      type: Array,
      default: null,
    },
    showType: {
      type: String,
      default: "cross",
    },
  },
  data() {
    return {};
  },
  mounted() {
  }
};
</script>

<style scoped lang="scss">
.none {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #971111;
  position: absolute;
}
.line {
  background-color: #971111;
  position: absolute;
}
.cross-stype {
  text-align: center;
  .list {
    position: relative;
    display: inline-block;
    width: 214px;
    .none {
      left: 0;
      top: 0;
    }
    .line {
      width: 190px;
      height: 2px;
      left: 16px;
      top: 3px;
    }
    .middle {
      width: 180px;
      margin-left: -90px;
      font-size: 14px;
      color: #00000099;
    }
    .results {
      font-size: 18px;
      color: #000000e6;
      font-weight: 600;
      margin-top: 22px;
    }
    .mt13 {
      margin-top: 13px;
    }
  }
}

.vertical-style {
  .list {
    position: relative;
    height: 98px;
    border: 1px solid #fff;
    .line {
      width: 2px;
      height: 74px;
      left: 3px;
      top: 16px;
      background: #971111;
    }
    .middle {
      margin-left: 28px;
      font-size: 14px;
      color: #00000099;
    }
    .results {
      font-size: 18px;
      color: #000000e6;
      font-weight: 600;
      margin-top: -12px;
    }
    .timestamp {
      color: #0000004d;
    }
    .mt13{
      margin-top: 5px;
      float: left;
      margin-right: 10px;
    }
  }
}
</style>